<template>
  <div class="app-container">
    <!--  过滤 start  -->
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
      <el-form-item label="租户名称">
        <el-input v-model="queryParams.name" placeholder="请输入租户名称" clearable style="width: 240px" />
      </el-form-item>
      <el-form-item label="开通日期">
        <el-date-picker
          v-model="daterange"
          value-format="YYYY-MM-DD"
          @change="changeDaterange"
          type="daterange"
          placeholder="请选择开通日期"
        />
      </el-form-item>
      <el-form-item label="业务人员">
        <el-input v-model="queryParams.salesMan" placeholder="请输入业务人员" clearable style="width: 240px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handelSearch">搜索</el-button>
        <el-button icon="Refresh" @click="handelReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!--  过滤 end  -->

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handelAdd">新增</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="isTableLoading" :data="tableData">
      <el-table-column type="index" label="序号" align="center" width="50" />
      <el-table-column label="系统开通日期" align="center" prop="activeDate" />
      <el-table-column label="租户名称" align="center" prop="name" />
      <el-table-column label="联系人" align="center" prop="contacts" />
      <el-table-column label="联系电话" align="center" prop="mobile" />
      <el-table-column label="所在省份" align="center" prop="province" />
      <el-table-column label="业务人员" align="center" prop="salesMan" />
      <el-table-column label="业务员电话" align="center" prop="salesMobile" />
      <el-table-column label="租约到期日期" align="center" prop="cutoff" />
      <el-table-column label="其让备注信息" align="center" prop="remark" />
      <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="handelEdit(row)"> 编辑 </el-button>
          <el-button link type="danger" size="small" @click="handelDel(row)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="listTotal"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getTableData"
    />

    <TenantDrawer
      v-if="drawerVisible"
      v-model="drawerVisible"
      :tenant-id="tenantId"
      :is-new="isNew"
      @submit="getTableData"
      @close-drawer="closeDrawer"
    />
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { initForm, initParams } from "@/views/tenantList/config.js";
import TenantDrawer from "./components/tenantDrawer";
import { tenantDPageList, tenantDDelete } from "@/api/tenantList";

const { proxy } = getCurrentInstance();

const isTableLoading = ref(false);
const daterange = ref([]);

const queryParams = ref({ ...initParams });
const listTotal = ref(0);
const tableData = ref([]);
const getTableData = async () => {
  try {
    isTableLoading.value = true;
    const { data } = await tenantDPageList(queryParams.value);
    listTotal.value = data?.total ?? 0;
    tableData.value = data?.list ?? [];
    isTableLoading.value = false;
  } catch (err) {
    console.log("getTableData>>>>", err);
    isTableLoading.value = false;
  }
};
const changeDaterange = e => {
  if (e?.length > 1) {
    queryParams.value.beginDate = e[0];
    queryParams.value.endDate = e[1];
  } else {
    queryParams.value.beginDate = "";
    queryParams.value.endDate = "";
  }
};
const handelSearch = () => {
  queryParams.value.pageNum = 1;
  getTableData();
};
const handelReset = () => {
  queryParams.value = {
    ...initParams
  };
  daterange.value = [];
  getTableData();
};

const isNew = ref(true);
const tenantId = ref("");
const drawerVisible = ref(false);

const handelAdd = () => {
  isNew.value = true;
  drawerVisible.value = true;
};
const handelEdit = row => {
  isNew.value = false;
  drawerVisible.value = true;
  tenantId.value = row.tenantId;
};

const postDel = async id => {
  try {
    isTableLoading.value = true;
    await tenantDDelete(id);
    proxy.$modal.msgSuccess("删除成功");
    getTableData();
    isTableLoading.value = false;
  } catch (err) {
    console.log(err);
    isTableLoading.value = false;
  }
};
const handelDel = row => {
  proxy.$modal
    .confirm(`确定删除【${row.name}】吗？`)
    .then(() => {
      postDel(row.tenantId);
    })
    .catch(() => {});
};

const closeDrawer = () => {
  drawerVisible.value = false;
};

getTableData();
</script>

<style lang="scss" scoped>
.plan-wrap {
  p {
    margin: 0;
    padding: 0;
  }

  .list {
    max-height: 400px;
    overflow-y: auto;
    .list-item {
      border: 1px solid #f0f0f0;
      // margin-top: 20px;
      header {
        font-size: 12px;
        line-height: 26px;
        background-color: #f0f0f0;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        img:hover {
          cursor: pointer;
        }
      }
      .options-warp {
        display: grid;
        gap: 6px;
        grid-template-columns: 1fr;
        padding: 6px 6px;
        font-size: 12px;
        & > div {
          display: grid;
          &:first-of-type {
            grid-template-columns: 94px 110px 1fr;
          }
          p.label {
            text-align: right;
            margin-right: 4px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            color: #4e5969;
            i {
              font-style: normal;
              display: inline-block;
              padding: 4px 4px 0 0;
            }
          }
        }

        & > div:nth-of-type(2) > div {
          display: grid;
          grid-template-columns: 94px 1fr;
        }
      }
    }
  }
}
.drawer-aside {
  width: auto;
  background-color: #fff;
  // border-right: 1px solid #e1e6ed;
  padding: 0;
  padding-top: 20px;
}
.spase {
  height: 100%;
  .title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    line-height: 30px;
  }

  .content {
    width: 100%;
    // height: 85vh;
    background: #f4f6f8;
    overflow-y: scroll;
    flex: 1;

    > img {
      width: 120px;
      height: 170px;
      margin: 200px auto 0;
      display: block;
    }

    .record-item {
      width: 95%;
      margin: 10px auto;
      height: 180px;
      border-radius: 10px;
      background: white;
      padding: 10px 0;

      .date {
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        border-bottom: 1px solid #f7f7f7;
        padding-left: 20px;

        i {
          display: inline-block;
          margin-right: 6px;
        }
      }

      .info-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;

        > div {
          height: 60px;
          text-align: center;
          font-size: 13px;
          color: #86909c;
          line-height: 30px;

          div {
            color: black;
          }
        }
      }
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  ::v-deep(.hidden-controls) {
    .el-input-number__decrease,
    .el-input-number__increase {
      display: none; /* 隐藏增加和减少按钮 */
    }
    .el-input__wrapper {
      padding: 0 10px;
    }
  }
}

.tenant-identification {
  :deep(.el-checkbox) {
    width: 100%;
    padding-left: 8px;
    box-sizing: border-box;
    margin-right: 0 !important;
    & + .el-checkbox {
      margin-top: 4px;
    }
    &:hover {
      background-color: #f2f3ff;
    }
  }
  :deep(.is-checked) {
    background-color: #f2f3ff;
  }
}

.dialog-footer {
  margin: 0 auto;
  width: 350px;
  display: flex;
  justify-content: center;
  &.footer-fixed {
    position: fixed;
    bottom: 28px;
    background-color: white;
    .btn {
      width: 120px;
      height: 36px;
      line-height: 36px;
    }
  }

  .classify-list {
    width: 100%;
    border: 1px solid #e6e8eb;
    border-top: none;
    padding: 10px;

    .classify-item {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
<style lang="scss">
.tenant-dialog {
  position: absolute !important;
  left: unset !important;
  right: 200px;
  top: calc(50vh - 200px);
  margin: 0 !important;
}

.drawer {
  .el-drawer__header {
    margin-bottom: 0;
  }
}
</style>
